<template>
  <div class="wrap">
    <div class="moudle-title" @click="openVehicleattend">在企车辆【{{ vehicleattendTotal }}】辆</div>
    <div class="rightbottomChart">
      <LakerEcharts
        ref="rightbottomChart2"
        :option="dataOption"
        width="100%"
        height="100%"
        @chartOnclick="openVehicleattend"
      />
    </div>
    <el-dialog v-model="dialogTableVisible" :title="dialogTitle">
      <VehicleAttendList :vehicleData="vehicleData" />
    </el-dialog>
  </div>
</template>
<script>
import sppApi from '@/api/spp'
import VehicleAttendList from './vehicleattendList.vue'
import LakerEcharts from '@/components/lakerEcharts/index.vue'
import * as echarts from 'echarts'
export default {
  name: 'SppLeftBottom',
  components: { LakerEcharts, VehicleAttendList },
  data() {
    return {
      vehicleattendTotal: 0,
      dialogTableVisible: false,
      rightbottomChart2: null,
      dialogTitle: '在厂车辆信息',
      vehicleData: {},
      dataOption: {
        backgroundColor: 'rgba(0, 0, 0, 0)', // 或者使用 'transparent'
        title: [
          {
            subtext: '正门',
            left: '30%',
            top: '0%',
            textAlign: 'center',
            subtextStyle: {
              color: '#50e9ff'
            }
          },
          {
            subtext: '次门',
            left: '70%',
            top: '0%',
            textAlign: 'center',
            subtextStyle: {
              color: '#50e9ff'
            }
          }
        ],
        legend: {
          top: 'bottom',
          right: 1,
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '正门',
            type: 'pie',
            radius: ['35%', '55%'],
            right: 150,
            itemStyle: {
              color: (list) => {
                var colorList = [
                  {
                    colorStart: '#26CEBA',
                    colorEnd: '#8efaed'
                  },
                  {
                    colorStart: '#488BFF',
                    colorEnd: '#9abffd'
                  },
                  {
                    colorStart: '#FFC069',
                    colorEnd: '#fadfba'
                  },
                  {
                    colorStart: ' #FD6865',
                    colorEnd: '#f8b2b1'
                  }
                ]
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    //左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['colorStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['colorEnd']
                  }
                ])
              }
            },
            label: {
              formatter: '{c}',
              fontWeight: 'normal',
              color: '#FFFFFF',
              position: 'inner'
            },
            data: [
              { value: 0, name: '职工' },
              { value: 0, name: '外委' }
            ]
          },
          {
            name: '次门',
            type: 'pie',
            radius: ['35%', '55%'],
            left: 150,
            itemStyle: {
              color: (list) => {
                var colorList = [
                  {
                    colorStart: '#26CEBA',
                    colorEnd: '#8efaed'
                  },
                  {
                    colorStart: '#488BFF',
                    colorEnd: '#9abffd'
                  },
                  {
                    colorStart: '#FFC069',
                    colorEnd: '#fadfba'
                  },
                  {
                    colorStart: ' #FD6865',
                    colorEnd: '#f8b2b1'
                  }
                ]
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    //左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['colorStart']
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]['colorEnd']
                  }
                ])
              }
            },
            label: {
              formatter: '{c}',
              fontWeight: 'normal',
              color: '#FFFFFF',
              position: 'inner'
            },
            data: [
              { value: 0, name: '职工' },
              { value: 0, name: '外委' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    const self = this
    this.initLoadData()
    let speed = 30000
    let theNowTime = function () {
      self.initLoadData()
    }
    setInterval(theNowTime, speed)
  },
  methods: {
    openVehicleattend(params) {
      this.vehicleData = { entranceSyscode: '', userType: '' }
      if (params) {
        this.vehicleData = params.data
      }
      this.dialogTableVisible = true
    },
    initLoadData() {
      this.vehicleattendTotal = 0
      sppApi.getVehicleattendChart().then((res) => {
        if (res.code === 200) {
          let serdata1 = []
          let serdata2 = []
          for (let i = 0; i < res.data.length; i++) {
            this.vehicleattendTotal = this.vehicleattendTotal + Number(res.data[i]['plate_num'])
            let type = res.data[i]['user_type'] == '1' ? '外委' : '职工'
            if (res.data[i]['entrance_name'] == '正门出入口') {
              serdata1[res.data[i]['user_type']] = {
                name: type,
                value: res.data[i]['plate_num'],
                entranceSyscode: res.data[i]['entrance_syscode'],
                userType: res.data[i]['user_type']
              }
            } else {
              serdata2[res.data[i]['user_type']] = {
                name: type,
                value: res.data[i]['plate_num'],
                entranceSyscode: res.data[i]['entrance_syscode'],
                userType: res.data[i]['user_type']
              }
            }
          }
          this.dataOption.series = [{ data: serdata1 }, { data: serdata2 }]
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.wrap {
  padding: 10px 0 0 0;
}

.moudle-title {
  cursor: pointer;
  color: #50e9ff;
  font-size: 12px;
  text-align: center;
}

.moudle-title:hover {
  color: gold;
}

.content-list {
  padding: 0 30px;
  color: #147dcf;
  font-size: 14px;
  margin-top: 2px;

  .content-item {
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
  }
}

.temper-scroll {
  height: 230px;
  width: 400px;
  margin: 30px auto;
  overflow: hidden;
  .scroll-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 15px;
    color: #147dcf;
  }
}

.incss span {
  color: greenyellow;
}

.outcss span {
  color: #147dcf;
}
.rightbottomChart {
  width: 90%;
  height: 200px;
}
</style>
